<template>
  <div class="page-index">
    <div class="page-index__header">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
        <el-form-item label="活动名称">
          <el-input v-model="formInline.activityName" placeholder clearable></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="formInline.status">
            <el-option label="全部" value></el-option>
            <el-option label="已发布" value="1"></el-option>
            <el-option label="未发布" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
          <el-button @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
          <el-button type="success" @click="add()" size="mini" icon="el-icon-edit">新增活动</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="page-index__content" ref="tableWrapRef">
      <el-table :data="tableData" style="width: 100%;" border v-loading="loading"
        :header-cell-style="{ background: '#ebecf0', color: '#606266' }">
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <el-table-column prop="activityName" label="活动名称" align="center"></el-table-column>
        <el-table-column prop="liveStartTime" label="直播时间" align="center"></el-table-column>
        <el-table-column label="活动有效期" align="center">
          <template slot-scope="scope">
            {{ scope.row.activityBeginTime }}至{{ scope.row.activityEndTime }}
          </template>
        </el-table-column>
        <el-table-column prop="cashDeadline" label="兑奖截止日期" align="center"></el-table-column>
        <el-table-column label="抽奖链接" align="center">
          <template slot-scope="scope">
            <el-link style="color:#409EFF;cursor:pointer" :href="currentOrigin + '/lottery/home?activityId=' + scope.row.uuid" target="_blank">抽奖链接</el-link>
          </template>
        </el-table-column>
        <el-table-column label="中奖记录" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="goraffleRecord(scope.row)">中奖记录</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="活动状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0">未发布</span>
            <span v-if="scope.row.status === 1">已发布</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="seedetail(scope.row)" type="text">查看详情</el-button>
            <!-- <el-button size="mini" @click="edit(scope.row)" type="text" v-if="scope.row.status == '0'">编辑</el-button> -->
            <el-button size="mini" @click="edit(scope.row)" type="text">编辑</el-button>
            <el-button type="text" @click="updatePlanStatus(scope.row.uuid, '1')"
              v-if="scope.row.status == '0'">发布</el-button>
            <el-button type="text" @click="updatePlanStatus(scope.row.uuid, '0')"
              v-if="scope.row.status == '1'">撤回</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-index__footer">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]" :current-page="listQuery.current" :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import { qryActivityConfig, editByUuid } from "@/api/lotteryActivityset";
import { tableSizeMixin } from '@/mixins/table-size';
export default {
  mixins: [tableSizeMixin],
  data() {
    return {
      formInline: { activityName: "", status: "" },
      loading: false,
      tableData: [],
      total: 0,
      listQuery: {
        current: 1,
        size: 20
      },
      // 当前地址 origin
      currentOrigin: window.location.origin
    }
  },
  created() {
    this.search()
  },
  methods: {
    search() {
      this.listQuery.current = 1
      this.getData()
    },
    getData() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          activityName: this.formInline.activityName,
          activityType: 5,
          status: this.formInline.status
        },

        ascs: [],
        descs: []
      };
      qryActivityConfig(data).then(res => {
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    handleSizeChange(val) {
      this.listQuery.current = 1
      this.listQuery.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getData()
    },
    kong() {
      this.formInline.activityName = ''
      this.formInline.status = ''
    },
    add() {
      this.$router.push({
        name: "liveLotteryEdit",
      });
    },
    goraffleRecord(row) {
      this.$router.push({
        name: "winningCheck",
        params: {
          activityId: row.uuid,
          activityType: 5
        }
      });
    },
    seedetail(row) {
      this.$router.push({
        name: "liveLotteryEdit",
        params: {
          edit: row,
          flag: true
        },
      })
      console.log('seedetail', row)
    },
    edit(row) {
      this.$router.push({
        name: "liveLotteryEdit",
        params: {
          edit: row,
        },
      });
    },
    updatePlanStatus(activeId, status) {
      var msg = "";
      if (status == "1") {
        msg = "发布";
      } else if (status == "0") {
        msg = "撤销";
      }
      this.$confirm("确定" + msg + "当前方案吗？", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            activityType: 5,
            activeId: activeId,
            status: status
          };
          editByUuid(data).then(res => {
            if (res.code == "1") {
              this.$message({
                showClose: true,
                message: msg + "成功",
                type: "success"
              });
              this.search();
            } else {
              this.$message.error(res.message);
            }
            this.loading = false;
          });
        })
    }
  }
}
</script>

<style lang="scss" scoped></style>